<template>
  <div class="about pages-box">
    <div class="section">
      <div class="user-box flex-align">
        <img
          class="avatar"
          :src="userInfo.avatar"
          alt=""
          @click="userInfo.name === '点击登录' && goLogin()"
        />
        <div class="name-box">
          <div class="name" @click="userInfo.name === '点击登录' && goLogin()">
            {{ userInfo.name }}
          </div>
          <div class="tip" style="margin: 0;">{{userInfo.coding}}</div>
          <div class="tip flex-align" @click="editinfo()" style="margin: 0;">
            编辑个人资料<i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="con">
          <div class="item" @click="redirect('MyActivity')">
            <div class="left">
              <i class="iconfont icon-liwulipin"></i>我的活动
            </div>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
          <div class="item" @click="redirect1()">
            <div class="left">
              <i class="iconfont icon-huangguan"></i>我的品牌
            </div>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
          <div class="item" @click="redirect('MyGroup')">
            <div class="left">
              <i class="iconfont icon-dingdan"></i>我发起的组团
            </div>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
          <div class="item" @click="redirect('MessageBoard')">
            <div class="left"><i class="iconfont icon-liuyan"></i>留言板</div>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
          <div class="item" @click="redirect('ChangePassword')">
            <div class="left"><img class="password-img" src="../assets/img/password.png" alt="">修改密码</div>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
          <div class="item" @click="cancellation()">
            <div class="left">
              <i class="iconfont icon-kaiguan"></i>退出登录
            </div>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
      </div>
    </div>
    <footerNav></footerNav>
  </div>
</template>
<script>
import { getPersonalInfo } from "@/api/users";
import footerNav from "@/components/footerNav";
export default {
  components: {
    footerNav,
  },
  data() {
    return {
      status: 0,
      userInfo: {
        name: "点击登录",
        avatar: "",
      },
      fsBrandVO: [],
    };
  },
  created() {
    let userD = localStorage.getItem("userInfo");
    if (userD) {
      let userInfo = JSON.parse(userD);
      console.log(userInfo,"信息");
      this.userInfo.name = userInfo.userName || userInfo.userPhone || this.fsBrandVO.userName;
      this.userInfo.avatar = userInfo.avatar || this.userInfo.avatar;
    }
    if(userD===null){
      this.userInfo.avatar = require("../assets/img/head.png")
    }
    if (localStorage.getItem("jyToken")) {
      this.getUserInfo();
    }
  },
  methods: {
    // 获取个人信息（取其中的品牌信息）
    getUserInfo() {
      getPersonalInfo().then((res) => {
        console.log(res,"info");
        if (res.code === 0) {
          // 判断是否已加入品牌
          this.fsBrandVO = res.data;
          this.userInfo.avatar = res.data.avatar
          this.userInfo.name = res.data.userName
          if(this.userInfo.avatar === "" || this.userInfo.avatar === null){
            this.userInfo.avatar = require("../assets/img/head.png")
          }else{
            this.userInfo.avatar = res.data.avatar
          }
        }
      });
    },
    editinfo() {
      this.$router.push({ name: "PersonalData" });
    },
    redirect1() {
      if (!localStorage.getItem("jyToken")) {
        return this.$router.replace({
          name: "Login",
          query: { dirUrlName: "About" },
        });
      }
      console.log(this.fsBrandVO,"info");
      if (Object.keys(this.fsBrandVO).length > 0) {
        if (this.fsBrandVO.fsBrandVO !== null &&this.fsBrandVO.brandAudit === 0||this.fsBrandVO.brandAudit === 1 || this.fsBrandVO.brandAudit === 3) {
          this.$router.push({
            name: "MyBrand",
            query: { brandInfo: JSON.stringify(this.fsBrandVO) },
          });
        }else if(this.fsBrandVO.fsBrandVO === null || this.fsBrandVO.brandAudit === 2 || this.fsBrandVO.brandAudit === 4){
          this.$router.push({ name: "JoinBrand" });
        }
      } else {
        this.$router.push({ name: "JoinBrand" });
      }
    },
    redirect(routeName) {
      this.$router.push({ name: routeName });
    },
    goLogin() {
      localStorage.removeItem("jyToken");
      this.$router.push({ name: "Login", query: { dirUrlName: "About" } });
    },
    // 注销
    cancellation() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定要退出登录吗？",
          confirmButtonText: "确定",
        })
        .then(() => {
          localStorage.removeItem("jyToken");
          localStorage.removeItem("userInfo");
          this.$router.replace({ name: "Login" });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="less" scoped>
.about {
  background: #f6f7f8;
  .user-box {
    height: 170px;
    background: linear-gradient(133deg, #fd7895 36%, #ffcdcd 100%);
    padding: 0 16px;
    .avatar {
      width: 62px;
      height: 62px;
      border: 1px solid #ffffff;
      border-radius: 50%;
      margin-right: 10px;
    }
    .name-box {
      .name {
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
      }
      .tip {
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        margin-top: 10px;
        .iconfont {
          font-size: 15px;
          margin-left: -4px;
        }
      }
    }
  }
  .content {
    padding: 16px;
    .con {
      background: #ffffff;
      border-radius: 10px;
      padding: 12px 15px;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      .left {
        font-size: 14px;
        color: #666666;
        display: flex;
        align-items: center;
        .iconfont {
          font-size: 16px;
          margin-right: 10px;
        }
        .icon-liwulipin {
          color: #e2473a;
        }
        .icon-huangguan {
          color: #fc7032;
        }
        .icon-dingdan {
          color: #f92644;
        }
        .icon-liuyan {
          color: #ff451d;
        }
        .icon-kaiguan {
          color: #e5340d;
        }
      }
      .icon-jinrujiantou {
        font-size: 16px;
        color: #666666;
      }
    }
  }
}
.password-img{
  width: 16px;
  height: 16.8px;
  margin-right: 10px;
}
</style>
